<template>
    <div class="login-container">
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
            <div class="body">
                <div class="login" v-if="isShow == 0">
                    <el-form :model="form">
                        <el-form-item>
                            <el-input placeholder="账号" v-model="form.userAccount" autocomplete="off">
                                <i slot="prefix" class="el-input__icon el-icon-user"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="密码" v-model="form.password" type="password">
                                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div class="button"><el-button type="primary" @click="login">登录</el-button></div>
                    <div class="tip">没有帐户？<span @click="goRegister">注册</span></div>
                    <!-- <div class="tip" v-if="btnText == '注册'">已有帐户？<span @click="goLogin">登录</span></div> -->
                </div>
                <div class="register" v-if="isShow == 1">
                    <el-form status-icon :label-position="labelPosition" :model="form" ref="form" :rules="rules">
                        <el-form-item prop="userAccount">
                            <el-input v-model="form.userAccount" placeholder="请输入账号" size="small">
                                <i slot="prefix" class="el-input__icon el-icon-user"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="form.password" type="password" placeholder="请输入密码" size="small">
                                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="username">
                            <el-input v-model="form.username" placeholder="请输入用户名" size="small">
                                <i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="userTel">
                            <el-input v-model="form.userTel" placeholder="请输入电话号码" size="small">
                                <i slot="prefix" class="el-input__icon el-icon-phone-outline"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="email">
                            <el-input v-model="form.email" placeholder="请输入邮箱" size="small">
                                <i slot="prefix" class="el-input__icon el-icon-message"></i>
                            </el-input>
                        </el-form-item>
                        <!-- </el-form-item> -->
                    </el-form>
                    <el-button type="info" size="small" @click="register('form')" :disabled="isDisabled">注册</el-button>
                    <p>已有帐户？<span @click="goLogin">登录</span></p>
                </div>
                <div class="right">
                    <img src="../../assets/logo.0a3252a6.png" alt="">
                </div>
            </div>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div> -->
        </el-dialog>
    </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
    name: 'Login',
    components: {

    },
    mixins: [],
    props: [],
    data() {
        const checkUserAccount = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('账号不能为空'));
            } else {
                callback();
            }
        };
        const checkPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('密码不能为空'));
            } else {
                callback();
            }
        };
        const checkUserName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('用户名不能为空'));
            } else {
                callback();
            }
        };
        const checkTel = (rule, value, callback) => {
            let reg = /^1[3|4|5|8][0-9]\d{4,8}$/
            if (value === '') {
                callback(new Error('请输入电话号码'));
            } else if (!reg.test(value)) {
                callback(new Error('手机号码格式不正确，请输入11位手机号'));
            } else {
                callback();
            }
        };
        const checkEmail = (rule, value, callback) => {
            // let reg = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/
            let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.\w{2,}$/
            if (value === '') {
                callback(new Error('请输入邮箱'));
            } else if (!reg.test(value)) {
                callback(new Error('邮箱格式不正确'));
            } else {
                callback();
            }
        };
        return {
            dialogFormVisible: false,
            title: '用户登录',
            // formLogin: {
            //     userAccount: '',
            //     password: '',
            //     type: 1
            // },
            labelPosition: 'right',
            form: {
                userAccount: 'zhangsan',
                password: '123456',
                username: '',
                userTel: '',
                email: '',
            },
            defaultUrl: require('../../assets/logo.0a3252a6.png'),
            baseHeight: 1,
            rules: {
                userAccount: [{ validator: checkUserAccount, trigger: 'change' }],
                password: [{ validator: checkPassword, trigger: 'change' }],
                username: [{ validator: checkUserName, trigger: 'change' }],
                userTel: [{ validator: checkTel, trigger: 'change' }],
                email: [{ validator: checkEmail, trigger: 'change' }],
                // type: [{ validator: checkType, trigger: 'blur' }]
            },
            isShow: 0,
            isDisabled: false
            // userInfo: {}
        }
    },
    computed: {
        ...mapState('userStore', ['token'])
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('show', this.show)

    },
    methods: {
        ...mapMutations('userStore', ['userLogin', 'getUserInfo', 'userRegister']),
        handleClose() {
            this.form = {}
            // this.$refs[formName].resetFields();
        },
        goRegister() {
            this.title = '用户注册'
            this.isShow = 1
            this.form = {}
        },
        goLogin() {
            this.title = '用户登录'
            this.isShow = 0

        },
        show(isShow) {
            this.dialogFormVisible = isShow
        },
        login() {
            this.userLogin(this.form)

            this.dialogFormVisible = false

        },
        register(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // if (this.form.userAccount.trim() == '' && this.form.password.trim() !== '') {
                    // this.isDisabled = false
                    // }
                    this.userRegister(this.form)

                } else {
                    return false;
                }
            });

        },
        resetForm() {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
<style lang='less' scoped>
.login-container {

    .body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .login {
            width: 350px;
            height: 400px;
            padding: 50px 20px;
            border-radius: 5%;

            .button {
                padding-top: 20px;
            }

            .el-button {
                display: block !important;
                width: 100% !important;
            }



            .tip {
                font-size: 12px;
                color: #7f7f7f;
                margin-top: 10px;
                text-align: right;

                span {
                    color: #11A983;
                    cursor: pointer;
                }
            }
        }

        .register {
            width: 350px;
            height: 400px;
            padding: 10px 20px;

            .el-button--info {
                width: 100%;
                background-color: #333;
                color: white;
                margin-top: 15px;
                border-color: #444;
            }

            .el-form-item {
                margin-bottom: 10px !important;
            }

            p {
                float: right;
                font-size: 12px;
                color: rgb(119, 118, 118);
                margin-top: 10px;

                span {
                    cursor: pointer;
                    color: rgb(10, 148, 203);
                }

                span:hover {
                    text-decoration: underline;
                }
            }
        }

        .el-button--primary {
            background-color: #11A983;
        }

        .right {
            flex: 1;
            padding-left: 15px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }

    }



    .dialog-footer {
        .el-button--primary {
            background-color: #11A983;
            margin-right: 30px;
        }

        .el-button--default:hover {
            color: #11A983;
            border-color: #11A983;
        }
    }


}
</style>